<!-- eslint-disable prettier/prettier -->
<template>
  <div class="page-main">
    <query-page
      ref="queryForm"
      v-model:selectedKeys="selectedKeys"
      title="采购属性维护"
      :form-component-config="formComponentConfig"
      :form-render-config="formRenderConfig"
      :form-render-keys="renderKeys"
      :table-component-config="tableComponentConfig"
      :table-render-config="tableRenderConfig"
      :table-render-keys="tableRenderKeys"
      :loading="isLoading"
      :data="datalist"
      :total="totalNum"
      row-selection-type="checkbox"
      @query-data="getData"
    >
      <!-- @selection-change="selectionChange" -->
      <template #container-side>
        <a-button
          v-permission="['base:procurement-attribute:update']"
          :disabled="!selectedKeys.length"
          @click="editBatch"
          >批量修改
        </a-button>
        <block v-permission="['base:procurement-attribute:import']">
          <batchImport
            file-code="infra_procurementAttributes"
            :import-url="`/api/procurement/infra/procurement-attribute/import`"
            export-type="apiUrl"
            title="采购属性维护"
            btn-tititle="Excel导入"
            :show-secret-level="false"
            @close-drawer="importData"
            @finish="importData"
          ></batchImport>
        </block>
      </template>
      <template #optional="{ record }">
        <a-button
          v-permission="['base:procurement-attribute:update']"
          type="text"
          @click="editOne(record)"
          >修改</a-button
        >
      </template>
    </query-page>

    <!-- 批量修改弹框 -->
    <Batchups
      v-if="showModal"
      ref="modalRef"
      :loading="editLoading"
      @save="modalSave"
      @close="closeModal"
    >
    </Batchups>
  </div>
</template>

<script setup lang="ts">
  import { ref, nextTick } from 'vue';
  import queryPage from '@/common/components/query-page/index.vue';
  import batchImport from '@/common/components/batch-import/index.vue';
  import {
    formRenderConfig,
    renderKeys,
    formComponentConfig,
  } from '@/views/basic-configuration/components/procurementquery-form';
  import {
    tableRenderConfig,
    tableComponentConfig,
    tableRenderKeys,
  } from '@/views/basic-configuration/catre-manag/procurementcolum';
  import useModal from '@/common/hooks/modal';
  import {
    Message,
    // TableRowSelection,
    // Notification,
  } from '@arco-design/web-vue';
  import {
    procurementAttributeByPage,
    editProcurement,
  } from '@/api/Basimanagementapi/categorymanagement';
  import Batchups from '../procurement-attr/Batchups.vue';

  //     proUrementdeleteAPI,
  // procurementAPIRecord
  const editLoading = ref(false);
  const isLoading = ref(false);
  const datalist = ref<any[]>([]);
  const totalNum = ref();
  const modalRef = ref();
  const queryForm = ref();
  const getData = async (form = {}) => {
    if (form.createTime?.length > 1) {
      form.createTime[0] += ' 00:00:00';
      form.createTime[1] += ' 23:59:59';
      form.createTime = form.createTime.join();
    }
    if (form.updateTime?.length > 1) {
      form.updateTime[0] += ' 00:00:00';
      form.updateTime[1] += ' 23:59:59';
      form.updateTime = form.updateTime.join();
    }
    isLoading.value = true;
    try {
      const res: any = await procurementAttributeByPage(form);
      if (res.code === 200) {
        datalist.value = res.data.list;
        totalNum.value = res.data.total;
      }
    } catch (err: any) {
      Message.warning(err);
    }
    isLoading.value = false;
  };
  const { showModal, closeModal, openModal } = useModal();

  const selectedKeys = ref([]);
  const editBatch = () => {
    if (selectedKeys.value.length === 0) {
      Message.warning('请选择要修改的记录！');
      return;
    }
    openModal();
    nextTick(() => {
      modalRef.value.show({}, '批量修改', false, ['save', 'return']);
    });
  };
  const editOne = (record: any) => {
    openModal();
    nextTick(() => {
      modalRef.value.show(record, '修改', false, ['save', 'return']);
    });
  };
  const demoDialogRef = ref('');
  console.log(demoDialogRef);

  // 导入数据
  const importData = async (response, secretLevel) => {
    console.log(response, secretLevel, 'response, secretLevel');
    getData(queryForm.value.getStatus());
  };

  const modalSave = async (val: any) => {
    if (val.title === '修改') {
      const res: any = await editProcurement([val.data]);
      if (res.code === 200) {
        Message.success('修改成功');
        closeModal();
        getData(queryForm.value.getStatus());
      }
    } else if (val.title === '批量修改') {
      const params = selectedKeys.value.map((item) => {
        return { id: item, ...val.data };
      });
      const res: any = await editProcurement(params);
      console.log(`output->res`, res);
      if (res.code === 200) {
        Message.success('修改成功');
        closeModal();
        getData(queryForm.value.getStatus());
      }
    }
  };
</script>

<style scoped lang="less">
  .formbox {
    margin: 8px;
    margin-bottom: 20px;
    // padding: 24px;
    background-color: white;
    border-radius: 6px;
  }

  .bcbtn {
    margin-left: 5px;
  }

  .qlxgbtn {
    margin-right: 5px;
    margin-left: 5px;
  }

  .pagingbox {
    float: right;
    margin-top: 30px;
    background-color: #fff;
  }

  .upload {
    display: inline-block;
    width: unset;
  }
</style>
